<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link rel="icon" type="image/png" sizes="16x16" href="../../static/icons/favicon.svg">
    <link rel="stylesheet" href="{{ url_for('static', filename='base.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='user/css/home.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='user/css/detail.css') }}">
    <script src="../../static/animate.js"></script>
    <script src="../../static/user/js/focus.js"></script>
    <script src="../../static/jQuery.js"></script>
    <script src="../../static/user/js/nav.js"></script>
    <script src="../../static/user/js/detail.js"></script>
</head>
<body>
<!-- 导航栏 -->
<div class="header">
    <div class="w">
        <a class="index" href="{{ url_for('user.index') }}">
            <span>
              Store
            </span>
        </a>
        <ul class="list">
            <li class="part">
                <a class="link" href="{{ url_for('user.index') }}">首页</a>
            </li>
            <li class="part">
                <a class="link" href="{{ url_for('user.car') }}">购物车</a>
            </li>
            <li class="part">
                <a class="link" href="{{ url_for('user.orders') }}">我的订单</a>
            </li>
            <li class="part">
                <a class="link" href="{{ url_for('user.about') }}">全部商品</a>
            </li>
            <li class="part search-li">
                <form action="{{ url_for('user.search') }}" method="get">
                    <input class="search" type="text" name="keyword" value="" placeholder="书名/作者名">
                    <button type="submit">
                        <img class="search-icon" style="width: 20px;height: 20px;" src="../../static/icons/search.svg">
                    </button>
                </form>
            </li>
            <li class="part">
                {% if user %}
                <a href="javascript:;" class="logout">
                    欢迎，{{ user.name }}
                </a>
                {% else %}
                <a class="link" href="{{ url_for('user.login') }}">
                    登录
                </a>
                {% endif %}
            </li>
        </ul>
    </div>
</div>
<!-- 导航栏 -->

<!-- 详情开始 -->
<div class="detail w">
    <div class="left">
        <img class="up" src="{{book.photo}}">
        <img class="down" src="../../static/imgs/shadow.png">
    </div>
    <div class="d-right">
        <div class="info1">
            <div class="name">
                <h2><a href="javascript:;">{{book.book_name}}</a></h2>
            </div>
            <p>
                <span class="author">作者：{{book.book_author}}</span>
                <span>销量：{{book.top}}</span>
                <span>出版社：{{book.derive}}</span>
            </p>
        </div>
        <div class="info2">
            <p>价格：{{book.price}}</p>
            <a class="add" href="javascript:;"><span>添加购物车</span></a>
            <a class="buy" href="javascript:;"><span>直接购买</span></a>
        </div>
        <div class="info3">
            <p class="text">{{book.desc}}</p>
            <div class="show-all">
                <a href="javascript:;">
                    <span class="toggle-text">展开 V</span>
                </a>
            </div>
        </div>
    </div>
</div>
<!-- 详情结束 -->

<!-- 评论开始 -->
<div class="comment w">
    <div class="title">
        <p class="text">
            <span class="shuquan">书圈</span>
            <span class="line">|</span>
            <span>共{{comment_count}}条</span>
        </p>
    </div>
    <div class="comment-list">
        <ul>
            {% for comment in comments %}
            <li>
                <span class="user">{{comment.name}}</span>
                {% if comment.comment|length > 125 %}
                <p class="show-part">{{ comment.comment.comment|truncate(125, True, '...') }} <a
                        href="javascript:;">展开全部</a></p>
                <p class="show-all hidden">{{ comment.comment.comment }} <a href="javascript:;">收起</a></p>
                {% else %}
                <p>{{ comment.comment.comment }}</p>
                {% endif %}
            </li>
            {% endfor %}
            <li>
                <p class="more">暂无更多评论╰(*°▽°*)╯</p>
            </li>
        </ul>

    </div>
</div>
<!-- 评论结束 -->
</body>

<!--模态框开始-->
<div class="side-add">
    <p>{{book.book_name}}</p>
    <input type="hidden" name="book_id" value="{{book.book_id}}">
    <span class="closePanelBtn"><a href="javascript:;">⨉</a></span>
    <img src="{{book.photo}}" alt="">
    <div class="counter-container">
        <span>请选择数量：</span>
        <button class="minusBtn">-</button>
        <input name="number" type="number" class="counterInput counter-input" value="1" min="1">
        <button class="plusBtn">+</button>
    </div>
    <div class="btn-add"><a href="javascript:;" class="add">确定</a></div>
</div>
<div class="side-buy">
    <p>{{book.book_name}}</p>
    <input type="hidden" name="book_id_2" value="{{book.book_id}}">
    <span class="closePanelBtn"><a href="javascript:;">⨉</a></span>
    <img src="{{book.photo}}">
    <div class="counter-container">
        <span>请选择数量：</span>
        <button class="minusBtn">-</button>
        <input type="number" class="counterInput counter-input" value="1" min="1">
        <button class="plusBtn">+</button>
    </div>
    <div class="btn-buy"><a href="javascript:;" class="buy">确定</a></div>
</div>


<!--评论开始-->
<div class="comment-add">
    <p>请输入您的评价</p>
    <p>待设置书名</p>
    <input type="hidden" name="book_id" value="待设置id">
    <span class="closePanelBtn"><a href="javascript:;">⨉</a></span>
    <img src="photo" alt="待设置src">
    <div class="counter-container">
        <textarea name="comment" id="" cols="30" rows="10" style="padding: 10px 10px">待设置文本</textarea>
    </div>
    <div class="btn-y"><a href="javascript:;" class="add">确定</a></div>
</div>

<!--模态框结束-->
</html>